<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('软件版本更新内容')" />
    <style type="text/css">
        .layui-col-sm4 {width: 20%;}
    </style>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
    <div class="main-content">
        <div class="north">
            <div class="north-content">
                <form class="layui-form dis-ctr" >
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                        <div class="layui-form-item">
                            <div class="layui-inline layui-col-sm4">
                                <label class="layui-form-label">功能名称：</label>
                                <div class="layui-input-block">
                                    <input id="funcName-kw" type="text" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-sm4" style="width:16%;">
                                <label class="layui-form-label">功能类型：</label>
                                <div class="layui-input-block">
                                    <select id="funcType-kw" th:with="funcType=${versionFuncTypes}">
                                        <option value="">所有</option>
                                        <option th:each="dict1 : ${funcType}" th:text="${dict1.info}" th:value="${dict1.code}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-sm4" style="width:16%;">
                                <label class="layui-form-label">操作类型：</label>
                                <div class="layui-input-block">
                                    <select id="operateType-kw" th:with="opType=${versionOperateTypes}">
                                        <option value="">所有</option>
                                        <option th:each="dict2 : ${opType}" th:text="${dict2.info}" th:value="${dict2.code}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-sm4" style="width:16%;">
                                <label class="layui-form-label">状态：</label>
                                <div class="layui-input-block">
                                    <select id="status-kw" name="status-kw">
                                        <option value="">所有</option>
                                        <option value="0">启用</option>
                                        <option value="1">禁用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-sm4">
                                <a class="layui-btn layuiadmin-btn-order dhicon dh-search" id="btn-search"><span class="fa_span">查询</span></a>
                                <button type="reset" class="layui-btn layui-btn-primary dhicon dh-refresh" id="dh-resets"><span class="fa_span">重置</span></button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="mid-content">
            <table class="layui-hide" id="dhTable" lay-filter="ftable"></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <div class="layui-btn layui-btn-normal layui-table-tools" lay-event="addbtn" onclick="$.operate.add()"  shiro:hasPermission="system:version:add">
            <p class="dhicon dh-plus" style="color:white;font-size:14px"><span class="fa_span">新增</span></p>
        </div>
    </div>
</script>
<script type="text/html" id="barDh">
    <a class="layui-btn layui-btn-xs dhicon dh-edit" onclick="$.operate.edit('{{d.guid}}')"   shiro:hasPermission="system:version:edit"><span class="fa_span">编辑</span></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs dhicon dh-remove" lay-event="delete" shiro:hasPermission="system:version:delete"><span class="fa_span">删除</span></a>
    <a class="layui-btn layui-bg-orange layui-btn-xs dhicon dh-search" lay-event="detail"  shiro:hasPermission="system:version:view"><span class="fa_span">详细</span></a>
</script>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    /*<![CDATA[*/
    var prefix = ctx + "system/versionitem";
    var versionId = [[${versionId}]];
    /*]]>*/
</script>
<script type="text/javascript">
    layui.use(['laydate', 'table','form','layer','jquery','upload'], function () {
        var $ = layui.$,layer = layui.layer,form = layui.form,table = layui.table,laydate = layui.laydate,upload = layui.upload;
        $.tablelist.init({
            elem: '#dhTable'
            ,modalName: "软件版本更新内容"
            ,createUrl: prefix + "/add?vid="+versionId
            ,updateUrl: prefix + "/edit/{id}"
            ,detailUrl: prefix + "/detail/{id}"
            ,url: prefix + "/list?versionId="+versionId
            ,defaultToolbar: ['filter', 'print', 'exports']
            ,initSort: {field: 'createTime',type: 'desc'}
            ,where: {
                field: 'createTime' //排序字段
                ,order: 'desc' //排序方式
            }
            ,sort:true
            ,cols: [[
                {type:'numbers',title:''},
                {field: 'guid',title: 'guid',hide:true},
                {field: 'funcName',title: '功能名称',width:250, sort: true},
                {field: 'funcType',title: '功能类型',width:130, sort: true,templet:function(rec){ return rec.funcTypeName;}},
                {field: 'operateType',title: '操作类型',width:130, sort: true,templet:function(rec){ return rec.operateTypeName;}},
                {field: 'deleted',title: '状态',width:130, sort: true, align:'center',templet:function(rec){ return ((rec.deleted == "0")  ? "启用":"<span style='color:red'>禁用</span>"); }},
                {field: 'createTime',title: '操作时间',width:200, sort: true},
                {title: '操作',width:320,align: 'center',templet:'#barDh'}
            ]
            ]
            ,toolbar: '#toolbar'
            ,height:'full-' + ( $('.north').height()+36),
        });
        //监听工具条
        table.on('tool(ftable)', function (obj) {
            var data = obj.data;
            switch(obj.event){
                case 'delete':
                    $.operate.remove("确定要删除么？",prefix + "/delete",{'id':data.guid},function(result){
                        allReload(result)
                    });
                    break;
                case 'detail':
                    var width = 800;
                    var height = ($(window).height() - 150);
                    var url = prefix + "/detail/"+ data.guid;
                    layer.open({
                        type: 2,
                        area: [width + 'px', height + 'px'],
                        offset: '10%',//距离顶部10%
                        fix: false,
                        //不固定
                        maxmin: true,
                        shade: 0.6,
                        title: "版本更新内容详情",
                        content:  url,
                        btn: ['关闭'],
                        //点击弹层外区域关闭
                        shadeClose: true,
                        cancel: function(index) {
                            return true;
                        }
                    });
                    break;
            }
        });
        //监听排序事件
        table.on('sort(ftable)', function(obj){
            $.tablelist.sort('dhTable',obj);
        });
        var active = {
            reload: function (formData) {
                table.reload('dhTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where:{
                        funcName:$("#funcName-kw").val(),
                        funcType:$("#funcType-kw").val(),
                        operateType:$("#operateType-kw").val(),
                        status:$("#status-kw").val()
                    }
                });
            },
        };
        $('#btn-search').on('click', function () {
            active['reload'].call(this);
        });
        //重新加载
        function allReload(result){
            if(result.code==0){
                setTimeout(function(){
                    layer.closeAll();
                    table.reload('dhTable', {url: prefix + "/list",page:{curr: 1}});
                }, 1000);
            }
        }
    })
</script>
</body>
</html>